<template>
  <section class="page">
    <headerbar>我的反馈</headerbar>

    <div id="receive" class="mui-active">
      <div class="d-scroll list-text" style="">
        <cube-scroll ref="scroll" :options="options" @pulling-up="onPullingUp">
          <fetchData
            v-if="isLoading"
            :loading="isLoading"
            :data="swipeData"
          ></fetchData>
          <cube-swipe>
            <transition-group name="swipe" tag="div">
              <div class="" v-for="(data, index) in swipeData" :key="data.id">
                <cube-swipe-item ref="swipeItem" class="swiper-no-swiping" :index="index">
                  <div class="tongzhi-item" @click="goDetail(data)">
                    <div class="cont">
                      <div>
                        <h1>{{ data.title }}</h1>
                        <span class="status1" :class="fontColor(data)">{{
                          gethuifu(data.sfhf)
                        }}</span>
                      </div>
                      <div class="color-tip">
                        {{ getTime(data.createTime) }}
                      </div>
                      <div class="look-more">
                        查看详情
                        <i class="icon-arrow"
                          ><img
                            src="../../../../static/images/dangjian/dangwu/arrow-left.png"
                            alt=""
                        /></i>
                      </div>
                    </div>
                  </div>
                </cube-swipe-item>
              </div>
            </transition-group>
          </cube-swipe>
          <!-- <div class="text-center no-data" v-if="!isLoading && swipeData.length===0">
            <img src="../../../../static/images/no_data.png" alt="">
            <p>暂无数据</p>
          </div> -->
          <!-- W noData -->
          <noData v-if="!isLoading && swipeData.length === 0"></noData>
          <onBottom v-else-if="onBottom"></onBottom>
        </cube-scroll>
      </div>
    </div>
  </section>
</template>

<script>
import moment from "moment";
import tools from "@/utils/tools";
import api from "@/common/config/api";
import loginService from "@/service/loginService";

export default {
  name: "myFeedbackList",
  data() {
    return {
      onBottom: false,
      isLoading: true,
      swipeData: [],
      options: {
        pullUpLoad: true,
        scrollbar: false,
      },
      pageIndex: 1,
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.onBottom = false
      let data = {
        isSelf: "1",
        page : this.pageIndex,
        limit: 10,
      };
      this.isLoading = true;
        this.fetchService.suggestQueryList(data).then((res) => {
          this.isLoading = false
          if (res.code === 0 && res.data.length < 1) {
            this.onBottom = true;
            this.options.pullUpLoad = false;// 将上拉刷新禁用
            return;
          }
          this.pageIndex++;
          if (
            Array.isArray(res.data) &&
            this.swipeData.length > 0 &&
            !this.isHasFocus(this.swipeData[0].id, res.data)
          ) {
            // this.newsQueryData = this.newsQueryData.concat(res.data)
            this.swipeData = this.swipeData.concat(res.data || [])
          } else {
            this.swipeData = res.data || [];
            console.log("this.newsQueryData", this.newsQueryData)
          }

          setTimeout(() => {
            this.$refs.scroll.forceUpdate &&
              this.$refs.scroll.forceUpdate(true, false)
            this.options.isPullUpLoad = false
          }, 100)
        });
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.loadData();
    },
    getTime(createTime) {
      return moment(createTime).format("YYYY年MM月DD日");
    },
    goDetail(data) {
      // this.$store.state.demandSurveyFeedbackDetail = data
      this.$router.push({ path: `/demandSurveyFeedbackDetail/${data.id}` });
    },
    fontColor(status) {
      let colorName = {
        0: "color-red",
        1: "color-green",
      };
      console.log(colorName[status.sfhf]);
      return colorName[status.sfhf];
    },
    gethuifu(sfhf) {
      if (sfhf === "0") {
        return "未回复";
      } else if (sfhf === "1") {
        return "已回复";
      } else {
        return "";
      }
    },
    /*判断是否存在某个值*/
    isHasFocus(userId, list) {
      let ret = false;
      list.some((v) => {
        if (v.recId === userId) {
          ret = true;
          return false;
        }
      });
      return ret;
    },
  },
};
</script>

<style scoped>
.status1 {
  float: right;
}
.tongzhi-item h1 {
  font-weight: 400;
  color: #333;
  line-height: 0.53333rem;
  font-size: 16PX;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  word-break: break-all;
}
</style>
